<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>航空订票</title>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        *{
            text-decoration: none;
			padding:0px;
			margin:0px;
			border:0px;
        }
		input{
			border: black solid 1px;
		}
        #nav{
            background-color: aliceblue;
            width: 100%;
            height: 25px;
			font-size: 15px;
        }
		body{
			background-image: url("img/bg.jpg");
		}
		#center{
			background-color: white;
			margin: auto;
			width: 1280px;
			/*height: 1200px;*/
		}
		.deleteP{
			float: right;
		}

    </style>
</head>
<body>
    <div id="nav" >
        <div style="margin-left: 10%;" >
			<span>今天是2019年12月8日</span>
			<img src="img/sun.png"><span>晴 22℃-16℃&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	
			</span>
			<div style="
				display: inline-block;
				background-color: gold;
				width: 30px;
				height: 25px;

		
				
			"><a href="#">登陆</a></div>
			<!-- <span style="background-color: gold; ">登陆</span> -->
			<span><a href="#">免费注册</a> </span><span><a href="#">手机客户端 </a></span>
			<span><a href="#">设为首页 </a></span><span><a href="#">加入收藏夹</a></span>
			</div>
		</div>
<!--		<div style="font-size: 60px;-->
<!--		margin-left: 10%;">联盟机票</div>-->
		<div ><img src="img/jipaio5.jpg"></div>
		<div id="center">
			<div style="font-size: 25px;margin-left: 19px;
			color: cornflowerblue">机票预定</div><hr>
			<div><img src="img/R%25W7TO%60%7D%250R8EBGN1B8MNJ8.png"></div>
			<div style="height: 40px;margin-left: 500px;">
				<span style="color: orange">
				⚪选择 --- ⚪预定 --->⚪核对 --->
				</span>⚪支付 ---⚪完成</div>
<!--			<div style="float: right">-->
<!--				<div >贴心提示</div>  <div >航班查询-->
<!--				<div >机票价格</div>-->
<!--					<div >支付方式</div>-->
<!--						<div >配送方式</div>-->
<!--							<div >行程单/报销凭证/发票</div>-->
<!--								<div >订单取消与修改</div>-->
<!--									<div >乘机常识</div>-->
<!--			</div>-->
			<div  style="display: inline-block ;position: absolute;" >
				<div style="background-color:lightskyblue;width: 1000px;height: 30px;
					border: black solid 1px">
					📕航班信息  &nbsp; &nbsp; &nbsp;总价：<span id="price"></span>
				</div>
				<div style="width: 1000px">
					<div style="display: inline-block;"><img width="40px" height="40px" src="img/logo.jpg"></div>
					海南航空 HU7718 <a href="#">[修改航班]</a>
					<a href="#">[退改签] </a>
					 <a href="#">[修改舱位]</a>
					<a href="#">经停</a>
					&nbsp;&nbsp;&nbsp;&nbsp;2013年06月17日 11：00 周水子国际机场 -- 起飞 ￥2200/成人
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2013年06月17日 15：40 宝安国际机场 -- 到达&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（含税费）
				</div>

			</div>
			<div style="display: inline-block; position: absolute;right: 120px">
				<img  src="img/G9%609OTCQT~KTY6V6T~%5BO)AG.png">
			</div>
			<div id="passInfo" style="position: relative ;margin-top: 100px;" >
				<div id="message1" style="background-color:lightskyblue;width: 1000px;height: 30px;
					border: black solid 1px">
					📕乘客信息
					<span style="font-size: 10px;color: red">
					请准确填写乘客信息（姓名，证件号码），以免在办理登机顺序时发生问题
					</span>
				</div>
				<div style="height: 30px;margin-left: 20px" >
					在常用姓名中搜索 <input type="text">
					<label><input name="Fruit" type="radio" value="" />刘某某 </label>
					<label><input name="Fruit" type="radio" value="" />家某某 </label>
					<label><input name="Fruit" type="radio" value="" />时某某 </label>
					<label><input name="Fruit" type="radio" value="" />和某某 </label>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">丨更多▼</a>
				</div>
				<div id="addPerson" style="margin-left: 850px"><button onclick="addPassenger()">+增加乘客</button> </div>

				<div style="height: 160px ;width: 900px ;border: black solid 1px;margin-left: 20px">
					<div style="border-bottom: black solid 1px; background-color: whitesmoke;margin-top: 1px;">
						第1位乘机人：<span id="recallName1"></span> <input type="radio"> 保存常用姓名
						<button class="deleteP" onclick="deleteP(this)">删除联系人×</button>
					</div>
					<div style="height: 30px;margin-top: 5px">*购票类型：
						<select>
							<option value="volvo">成人票</option>
							<option value="saab">儿童票</option>
						</select>
						￥2200/成人（含税费） <a href="#">退改签</a>
					</div>
					<div  style="height: 30px">*姓 名：<input type="text" value="" onblur="blurDemo(this)"> <a href="#">填写说明</a> </div>
					<div  style="height: 30px">*证件类型: <select><option>护照</option><option>身份证</option></select></div>
					<div  style="height: 30px">*证件号码： <input type="text"></div>
				</div>
				<div style="height: 10px"></div>
				<div style="height: 160px ;width: 900px ;border: black solid 1px;margin-left: 20px">
					<div style="border-bottom: black solid 1px; background-color: whitesmoke;margin-top: 1px;">
						第2位乘机人：<span id="recallName2"></span> <input type="radio"> 保存常用姓名
						<button class="deleteP" onclick="deleteP(this)">删除联系人×</button>
					</div>
					<div style="height: 30px;margin-top: 5px">*购票类型：
						<select>
							<option value="volvo">成人票</option>
							<option value="saab">儿童票</option>
						</select>
						￥2200/成人（含税费） <a href="#">退改签</a>
					</div>
					<div  style="height: 30px">*姓 名：<input type="text" value="" onblur="blurDemo(this)"> <a href="#">填写说明</a> </div>
					<div  style="height: 30px">*证件类型: <select><option>护照</option><option>身份证</option></select></div>
					<div  style="height: 30px">*证件号码： <input type="text"></div>
				</div>
<!--				<div id="addPerson" style="margin-left: 850px"><button onclick="addPassenger()">+增加乘客</button> </div>-->
<!--				<div>-->
<!--					<div>第二位乘机人：王某某 <input type="radio"> 保存常用姓名 </div>-->
<!--					<div>*购票类型：-->
<!--						<select>-->
<!--							<option value="volvo">成人票</option>-->
<!--							<option value="saab">儿童票</option>-->
<!--						</select>-->
<!--						￥2200/成人（含税费） 退改签-->
<!--					</div>-->
<!--					<div>*姓 名：<input type="text" value="王某某"> 填写说明</div>-->
<!--					<div>*证件类型: <select><option>护照</option><option>身份证</option></select></div>-->
<!--					<div>*证件号码： <input type="text"></div>-->
<!--					<div>增加乘客</div>-->
<!--				</div>-->
			</div>
			<div id="lianXiRenInfo"  style="margin-top: 10px">
				<div style="background-color:lightskyblue;width: 1000px;height: 30px;
					border: black solid 1px"> 📕联系人信息 请您准确填写联系人信息（联系人，手机号码，Email），以便我们联系</div>
				<div style="height: 30px;margin-left: 20px">*联系人： <input type="text"></div>
				<div style="height: 30px;margin-left: 20px">*手机号码：<input onblur="checkMobile(this.value)" id="telephone" value="" type="tel"></div>
				<div style="height: 30px;margin-left: 20px">联系电话： <input type="text" value="区号"><input type="text" value="电话号码"><input type="text" value="分机"></div>
				<div style="height: 30px;margin-left: 20px">传真号码 ：<input type="text" value="区号"><input type="text" value="电话号码"><input type="text" value="分机"></div>
				<div style="height: 30px;margin-left: 20px">E-mail:<input type="email"></div>
				<div style="height: 30px;margin-left: 20px">联系地址：<input type="text"></div>
			</div>
			<div style="margin-left: 400px">
				<div style="background-color: whitesmoke;height: 30px;width: 50px;float: left">上一步</div>
				<div style=" background-color: orange;height: 30px;width: 50px ;float:left;margin-left: 100px">下一步</div>
			</div>
		</div>
		<div style="margin-top: 100px">
			<img src="img/QQ截图20191208180928.jpg" style="text-align: center">
		</div>
	
	

</body>
<script>
	window.onload = function () {
		 let p = document.getElementById("price");
		 let count =  document.getElementsByClassName("deleteP").length;
		 let price = count*2200;
		 p.innerText = price;

	}
	function checkMobile(e){
		// alert(e);
		if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(e))){
			alert("不是完整的11位手机号或者正确的手机号前七位");
			return false;
		}
	}

	function deleteP(e) {
		// alert(e.innerHTML);
		console.log(e.parentNode.parentElement.innerHTML);
		e.parentNode.parentElement.remove();
		let p = document.getElementById("price");
		let count =  document.getElementsByClassName("deleteP").length;
		let price = count*2200;
		p.innerText = price;
	}
	function blurDemo(e) {
		console.log(e.parentNode.parentElement.innerHTML);
		console.log(e.parentNode.parentElement.getElementsByTagName("div"))
		let divList =  e.parentNode.parentElement.getElementsByTagName("div");

		let div0Html = divList[0].innerHTML.trim().substring(1,2);
		console.log(div0Html);
		let cursor = "recallName"+div0Html;
		// alert(cursor);

		// document.getElementById("recallName1").innerText = e.value;
		document.getElementById(cursor).innerText = e.value;

	}

	function addPassenger() {
		let passInfo = document.getElementById("passInfo");
		let count =  document.getElementsByClassName("deleteP").length;
		let p = document.getElementById("price");

		count++;
		let price = count*2200;
		p.innerText = price;


		// alert(passInfo.innerHTML);
		let innerHTML = passInfo.innerHTML;
		innerHTML = innerHTML+"\t\t\t\t<div style=\"height: 160px ;width: 900px ;border: black solid 1px;margin-left: 20px\">\n" +
				"\t\t\t\t\t<div style=\"border-bottom: black solid 1px; background-color: whitesmoke;margin-top: 1px;\">\n" +
				"\t\t\t\t\t\t第"+count+"位乘机人：<span id=\"recallName"+count+"\"></span> <input type=\"radio\"> 保存常用姓名<button class=\"deleteP\" onclick='deleteP(this)'>删除联系人×</button>\n" +
				"\t\t\t\t\t</div>\n" +
				"\t\t\t\t\t<div style=\"height: 30px;margin-top: 5px\">*购票类型：\n" +
				"\t\t\t\t\t\t<select>\n" +
				"\t\t\t\t\t\t\t<option value=\"volvo\">成人票</option>\n" +
				"\t\t\t\t\t\t\t<option value=\"saab\">儿童票</option>\n" +
				"\t\t\t\t\t\t</select>\n" +
				"\t\t\t\t\t\t￥2200/成人（含税费） <a href=\"#\">退改签</a>\n" +
				"\t\t\t\t\t</div>\n" +
				"\t\t\t\t\t<div  style=\"height: 30px\">*姓 名：<input type=\"text\" value=\"\" onblur=\"blurDemo(this)\"> <a href=\"#\">填写说明</a> </div>\n" +
				"\t\t\t\t\t<div  style=\"height: 30px\">*证件类型: <select><option>护照</option><option>身份证</option></select></div>\n" +
				"\t\t\t\t\t<div  style=\"height: 30px\">*证件号码： <input type=\"text\"></div>\n" +
				"\t\t\t\t</div>";
		passInfo.innerHTML = innerHTML;

	}
</script>
</html>